<template>
	<div class="container">
		<h1>学习列表</h1>
		<table class="data-table">
			<thead>
				<tr>
					<th>学习日期</th>
					<th>学习内容</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in paginatedItems" :key="item.id">
					<td>{{ item.sj }}</td>
					<td>{{ item.nr }}</td>
				</tr>
			</tbody>
		</table>
		<div class="pagination">
			<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
			<span>当前页: {{ currentPage }} / {{ totalPages }}</span>
			<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
		</div>
	</div>
</template>
<script setup>
	import {
		wcao,
		post
	} from "@/http";
	import {
		ref,
		computed
	} from 'vue';

	const items = ref([]); // 用于存储所有学习项目
	const currentPage = ref(1);
	const itemsPerPage = ref(10); // 每页显示的项数

	const totalPages = computed(() => {
		return Math.ceil(items.value.length / itemsPerPage.value);
	});

	const paginatedItems = computed(() => {
		const start = (currentPage.value - 1) * itemsPerPage.value;
		const end = start + itemsPerPage.value;
		return items.value.slice(start, end);
	});

	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
		}
	};

	const prevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};
	const getAllData = () => {
		// 实现新增逻辑
		post('/learn/xuewan', {}, (res) => {
			console.log('接收到后端的返回数据:', res);
			ElMessage.success('数据加载成功');
			items.value = res;
		}, (res) => {
			ElMessage.warning(res.message)
		})
	};
	getAllData();
</script>


<style scoped>
	.container {
		margin: 0 auto;
		font-family: Arial, sans-serif;
	}

	h1 {
		text-align: center;
	}

	.data-table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 20px;
	}

	.data-table th,
	.data-table td {
		border: 1px solid #dddddd;
		text-align: left;
		padding: 8px;
	}

	.data-table th {
		background-color: #f2f2f2;
	}

	.data-table tr:nth-child(odd) {
		background-color: #deb887;
		/* 偶数行背景色 */
	}

	.data-table tr:nth-child(even) {
		background-color: #f6ffd8;
		/* 奇数行背景色 */
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	button {
		padding: 10px 15px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	button:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}
</style>